<template>
  <div class="bug-info-container">
    <ul class="bug-info-box" v-if="bugMsgsList.length > 0">
      <li
        class="bug-info-item"
        v-for="(item, index) in bugMsgsList"
        :key="index"
        :class="getClassByIndex(item)"
      >
        <div class="block bug-info-item-title">
          <div>
            <el-avatar
              class="bug-info-item-avatar"
              v-if="item.create_user_head_img !== ''"
              :size="32"
              :src="item.create_user_head_img"
              alt="" ></el-avatar>
            <el-avatar
              class="bug-info-item-avatar"
              v-else
              :size="32"
              >
              <el-icon :size="16"><Picture /></el-icon>
            </el-avatar>&nbsp;
          </div>
          <div>
            <el-text size="small">{{ tableTimeDateMsg(item.createAt) }}</el-text>&nbsp;&nbsp;
          </div>
          <div>
            <el-text size="default">{{ item.create_user_name }}说：</el-text>
          </div>
        </div>
        <div ref="bugMsgContainer" class="bug-info-item-msg" v-html="item.bug_msg" @click="handleImageClick($event)"></div>
      </li>
    </ul>
    <p v-else>暂无数据</p>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect } from "vue";
import { tableTimeDateMsg } from "@/utils/utils";
import useUserStore from "@/store/modules/user";


const useUserStoreData = useUserStore();

interface Item {
  ID: number;
  ItemRequirementBugId: number;
  UpdateAt: string;
  bug_img_url: string;
  bug_msg: string;
  createAt: string;
  create_user_id: string;
  create_user_name: string;
  edite_status: number;
  to_user_id: number;
  to_user_name: string;
  create_user_head_img: string;
}

const props = defineProps({
  bugMsgs: {
    type: Array as Item | any,
    default: () => [],
  },
});

const bugMsgsList = ref(props.bugMsgs);

// 监听父组件bugMsg的数据变化
watchEffect(() => {
  bugMsgsList.value = props.bugMsgs;
});

const bugMsgContainer = ref<HTMLElement | null>(null);

const handleImageClick = (event:MouseEvent) => {
  // 检查点击的是否是图片
  if ((event.target as HTMLElement)?.tagName === 'IMG') {
    const targetImage = event.target as HTMLImageElement;
    // 判断是否处于全屏状态
    if (!document.fullscreenElement) {
      // 请求全屏
      targetImage.requestFullscreen().catch((err) => {
        // 处理无法进入全屏的情况
        console.error("Error attempting to enable full-screen mode:", err);
      });
    } else {
      // 退出全屏
      document.exitFullscreen().catch((err) => {
        // 处理无法退出全屏的情况
        console.error("Error attempting to disable full-screen mode:", err);
      });
    }
  }
}

const getClassByIndex = (val: any) => {
  return val === useUserStoreData.userInfo.nickName ? 'odd-item' : '';
}
</script>
<style lang="scss" scoped>
.bug-info-container {
  width: 100%;
  height: calc(100% - 260px);
  position: relative;
  .bug-info-box {
    width: 50%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    .bug-info-item {
      width: 100%;
      border: 1px solid #eee;
      border-radius: 3px;
      margin-bottom: 10px;
      padding: 5px;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      &.odd-item .bug-info-item-title {
        flex-direction: row-reverse;
      }

      .bug-info-item-title {
        height: 40px;
        line-height: 32px;
        background-color: rgb(216.8, 235.6, 255);
        font-family: Arial, Helvetica, sans-serif;
        color: #000;
        display: flex;
        flex-direction: row;
        padding: 5px;
        border-radius: 3px;
      }
      .bug-info-item-msg {
        padding: 10px;
        margin: 5px 10px 5px 32px;
        border-radius: 3px;
        border: 1px solid #eee;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }

}

/* 定义奇数索引的样式 */
.odd-item {
  margin-left: 100%;
}
</style>
